07 System.import vs import

O System.import() é uma maneira utilizada pelo Webpack para fazer o carregamento assíncrono sob demanda de módulos. Porém, o ECMAScript nas versões mais atuais, usa uma sintaxe específica para carregamento nestes casos, fazendo o uso da função import().

Tanto o Chromo como outros navegadores já suportam esta função, o Webpack ao detectá-la fará por debaixo dos panos, ele fará o System.import(), mas aceitando a sintaxe do ES que se tornará vigente.

Há uma proposta para introduzir importações dinâmicas na linguagem que está bem avançada e que pode ser acompanhada em https://github.com/tc39/proposal-dynamic-import.

O Webpack 3 está preparado para trabalhar com o import(), mas se salvamos e damos o build no projeto, teremos um erro na compilação. Somos informados que ele tem um erro na sintaxe, no entanto, ele não é entendido pelo Babel - utilizado por frameworks como React. Isto significa que o Babel entende como inválido o usuo do import().

Você tem opção de alterar o código e usar o System.import(), ou pode utilizar o que a sintaxe mais moderna, ue será adotada como padrão no futuro. No segundo caso, se você utilizar o Babel, terá que instalar o plugin babel-plugin-syntax-dynamic-import.

No Terminal, rodaremos o seguinte comando:

npm install babel-plugin-syntax-dynamic-import@6.18.0 --save-dev

Com isso, não será realizado o parse do Babel e deixar de reclamar sobre a sintaxe. Depois de fazemos o download do plugin, acessaremos o arquivo .babelrc para adicionar o novo plugin.

{
    "presets":["es2017"],
    "plugins" : ["transform-decorators-legacy", "babel-plugin-syntax-dynamic-import"]

}

Agora ele será processado também durante o processo de compilação. Compilaremos a aplicação novamente, e ao recarregarmos a aplicação, a aplicação conseguirá importar as negociações como o esperado.

Nós utilizamos a abordagem mais moderna para a realização do carregamento assíncrono (lazy loading). Este ajuste era necessário apenas em projetos que utilizam o Babel.